<template>
	<view class="roc-search">
		<u-popup :show="show" @close="close" @open="open" mode="bottom" round="30" :closeable="true">
			<view class="title">筛选</view>
			<scroll-view class="popup-cont" scroll-y="true">
				<view class="u-p-20">
					<!-- 查询表单 -->
					<roc-diyform-search
						ref="rocDiyformSearch"
						:queryfcFieldRules="queryfcFieldRules"
						:showFormData="showFormData"
					/>
				</view>
			</scroll-view>
			<view class="btn-box u-p-20">
				<u-button text="重置" shape="circle" @click="handleQuery(0)"></u-button>
				<u-button type="primary" text="确定" shape="circle" @click="handleQuery(1)"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
import rocDiyformSearch from '@/components/roc-diyform/roc-diyform-search.vue';
export default {
	name: 'roc-search',
	components: {
		rocDiyformSearch
	},
	props: {
		// 查询字段json
		queryfcFieldRules: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			show: false,
			showFormData: {},
			queryFormData: {}
		};
	},
	methods: {
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		},
		handleQuery(type) {
			// type 确定1 重置0
			if (type == 1) {
				const formData = this.$refs['rocDiyformSearch'].form;
				this.showFormData = JSON.parse(JSON.stringify(formData));
				this.queryFormData = formData;
			} else {
				this.$refs['rocDiyformSearch'].resetForm();
				this.showFormData = {};
				this.queryFormData = {};
			}
			this.$emit('submitSearch', this.queryFormData)
			this.close();
		}
	}
};
</script>

<style lang="scss">
.title {
	text-align: center;
	padding: 28rpx 0 10rpx 0;
	font-size: 32rpx;
}
.popup-cont {
	height: 60vh;
}
.btn-box {
	display: flex;
}
</style>
